<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<!-- import CSS -->
		<link rel="stylesheet" href="../js/3rd/elementUi/index.css">
		<link rel="stylesheet" href="../css/pc.css">
		<script src="../js/3rd/elementUi/vue.js"></script>
		<script src="../js/3rd/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<div id="userLists" class="user-lists" style="display:none">

			<el-container>
				<el-aside class="sider-bar" id="siderbar">
					<div class="logo"><img src="../image/logo.jpg">来赚吧管理后台</div>
					<tp-siderbar title="金种子用户"></tp-siderbar>
				</el-aside>
				<el-main>
					<div class="right-content">
						<el-breadcrumb separator-class="el-icon-arrow-right" class="bread-bd">
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item>种子分润列表</el-breadcrumb-item>
						</el-breadcrumb>
						
						<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
							<el-form-item label="期号">
								<el-input placeholder="请出入期号查询" v-model="periodNo"></el-input>
							</el-form-item>
							<el-form-item label="序列号">
								<el-input placeholder="请输入序列号查询" v-model="serialNumber"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="fetchList()">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="dialogExcelVisible=true">导入利润</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="showVerify()" v-if="parseInt(userId)==1">审核分润</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="showRevert()">取消分润</el-button>
							</el-form-item>
						</el-form>
						<template>
						  <el-tabs v-model="status" @tab-click="fetchList()">
							<el-tab-pane label="未分润" name="0">未分润</el-tab-pane>
							<el-tab-pane label="进入分润" name="1">进入分润</el-tab-pane>
							<el-tab-pane label="分润结束" name="2">分润结束</el-tab-pane>
							<el-tab-pane label="撤销分润" name="9">撤销分润</el-tab-pane>
						  </el-tabs>
						</template>
						<template>
							<el-table :data="goldDeedList" stripe style="width: 100%">
								<el-table-column prop="id" label="序号" width="80">
								</el-table-column>
								<el-table-column prop="periodNo" label="期号" width="180">
								</el-table-column>
								<el-table-column prop="serialNumber" label="pos机终端号" width="180">
								</el-table-column>
								<el-table-column prop="totalProfit" label="总额" width="180">
									<template slot-scope="scope">
									  <span >￥{{ scope.row.totalProfit }}</span>
									</template>
								</el-table-column>
								<el-table-column label="状态">
									<template slot-scope="scope">
									  <span >{{ scope.row.status|status }}</span>
									</template>
								</el-table-column>
								<el-table-column label="分润金额">
									<template slot-scope="scope">
										直推人分润￥{{ scope.row.percentDirectProfit}}
										间推人分润￥{{ scope.row.percentIndirectProfit}}
										生长素分润￥{{ scope.row.percentGrowProfit}}
										团长分润￥{{ scope.row.percentTeamLeaderProfit}}
										办理者分润￥{{ scope.row.percentMyselfProfit}}
									</template>	
								</el-table-column>
								<el-table-column
								  label="种子来源"
								  width="180">
								  <template slot-scope="scope">
									<el-popover trigger="click" placement="top">
										
									  <template v-for="flow in scope.row.flows">
										  <div style="margin-top:20px">
											  <p>姓名: {{ flow.user.realName }}({{flow.user.telephone}})</p>
											  <p>时间: {{ flow.createTime |formatData}}</p>
											  <p>期号: {{ flow.periodNo }}</p>
											  <p>金种子数量: {{ flow.jzzNumber }}</p>
											  <p>金种子利润: ￥{{ flow.profit }}</p>
										  </div>
									  </template>
									     
									  <div slot="reference" class="name-wrapper">
										<el-tag size="medium" style="cursor: pointer;">查看详情</el-tag>
									  </div>
									</el-popover>
								  </template>
								</el-table-column>
								<!-- <el-table-column fixed="right" label="操作">
								   <template slot-scope="scope">
									  <el-button
										size="mini"
										@click="handleCheckCrowFunding(scope.$index, scope.row)">审核</el-button>              
									</template>
								  </el-table-column> -->
							</el-table>
							<el-pagination
							  :page-size="20"
							
							  layout="prev, pager, next"
							  @current-change="handleCurrentChange"
							  :total="totalCount">
							</el-pagination>
						</template>


						<div class="clearfix"></div>
					</div>
				</el-main>
			
				<el-dialog title="导入利润" :visible.sync="dialogExcelVisible">
					<div>	
					  <el-upload
					  class="upload-demo"
					  ref="upload"
					  multiple
					  accept=".xlsx"
					  action=""
					  :with-credentials="true"
					  :http-request="uploadFile"
					  :on-remove="handleRemove"
					  :on-change="handleChange"
					  :on-success="handleSuccess"
					  :file-list="fileList"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 20px">只能上传xls格式的 excel文件</div>
					  </el-upload>
					  <div slot="footer" class="dialog-footer" style="margin-top: 50px;">
						<el-button @click="dialogExcelVisible = false">取 消</el-button>
						<el-button type="primary" @click="uploadFile">确 定</el-button>
					  </div>
					</div>  
				</el-dialog>
				<el-dialog title="审核期号" :visible.sync="dialogVerifyVisible">
					<el-form>
						<el-form-item label="选择期号">
						    <el-checkbox-group v-model="selectedPeriodNo">
						      <el-checkbox :label="periodNo" name="type" v-for="periodNo in periodNoList"></el-checkbox>					    
						    </el-checkbox-group>
						</el-form-item>
					</el-form>								
					<div slot="footer" class="dialog-footer" style="margin-top: 50px;">
						<el-button @click="dialogVerifyVisible = false">取 消</el-button>
						<el-button type="primary" @click="confirmCheck()">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="取消分润" :visible.sync="dialogRevertVisible">
					<el-form>
						<el-form-item label="选择期号">
						    <el-checkbox-group v-model="selectedRevertPeriodNo">
						      <el-checkbox :label="periodNo" name="type" v-for="periodNo in periodNoList"></el-checkbox>					    
						    </el-checkbox-group>
						</el-form-item>
					</el-form>								
					<div slot="footer" class="dialog-footer" style="margin-top: 50px;">
						<el-button @click="dialogRevertVisible = false">取 消</el-button>
						<el-button type="primary" @click="confirmRevert()">确 定</el-button>
					</div>
				</el-dialog>
			</el-container>
	</body>


	<!-- import JavaScript -->
	<script src="../js/3rd/elementUi/index.js"></script>
	<script src="../js/js/admin_siderbar.js"></script>
	<script src="../js/js/common.js"></script>
	<script>
		var token = getCookie("userToken");
		var userId = getCookie("userId");
		console.log(token)
		console.log(userId)
		if (!token || !userId) {
			window.location.href = "/admin/login.html";
		}
		new Vue({
			el: '#userLists',
			data: {
				goldDeedList: [],
				telephoneNum: '',
				selectRowContent: '',
				dialogExcelVisible: false,
				isDoingFetch: false,
				selectIndex: null,
				formLabelWidth: '120px',
				currentImageUrl: '',
				form: {
					client: 3,
					beginTime: '',
					endTime: '',
					title: '',
					money: '',
					token: '',
					userId: ''
				},
				value6: '',
				serialNumber: '',
				periodNo: '',

				limit: 1, // 上传excell时，同时允许上传的最大数
				fileList: [], // excel文件列表
				status:"0",
				totalCount:0,
				page:1,
				dialogVerifyVisible:false,
				dialogRevertVisible:false,
				periodNoStatus:0,
				periodNoList:[],
				selectedPeriodNo:[],
				selectedRevertPeriodNo:[]
			},
			created: function() {
				this.fetchList()
				$("#userLists").show();
			},
			filters:{
				status: function (key) {
				    key = parseInt(key);
				    var map = {
				        0: "未分润",
				        1: "进入分润",  
				        2: "分润结束",
						9:"撤销分润"
				    };
				    return map[key];
				},
				formatData:function(key){
				  return formatDate(key)
				}
			},
			methods: {
				fetchList: function() {
					if (this.isDoingFetch) {
						return
					}
					this.isDoingFetch = true;
					var getUsersUrl = "/jzz/profitInput/list";
					var data = {
						token: token,
						userId: parseInt(userId),
						client: 3,
						page: this.page,
						serialNumber: this.serialNumber,
						periodNo: this.periodNo,
						size: '20',
						status: this.status
					}
					pushData(getUsersUrl, data, function(res) {
						console.log(res)
						this.isDoingFetch = false;
						if(res.errorCode=="008"){
						  window.location.href = "/admin/login.html";
						}
						if (res.state) {
							this.goldDeedList = res.data.jzzProfitInput;
							this.totalCount=res.data.totalCount
						} else {
							this.$message.warning(res.message)
						}
					}.bind(this));
				},
				confirmCheck:function(){
					const url="/jzz/profitInput/periodNos/check";
					const data={
						client: 3,
						periodNos: this.selectedPeriodNo,
						token: token,
						userId: parseInt(userId),
					}
					pushData(url,data,function(res){
						if(res.state){
							this.$message({
							  message: '审核成功',
							  type: 'success'
							});
							this.dialogVerifyVisible=false;
							this.status="1"
							this.fetchList()
						}else{
							this.$message.warning(res.message)
						}
					}.bind(this))
				},
				confirmRevert:function(){
					const url="/jzz/profitInput/periodNos/revert";
					const data={
						client: 3,
						periodNos: this.selectedRevertPeriodNo,
						token: token,
						userId: parseInt(userId),
					}
					pushData(url,data,function(res){
						if(res.state){
							this.$message({
							  message: '取消成功',
							  type: 'success'
							});
							this.dialogRevertVisible=false; 
							this.fetchList()
						}else{
							this.$message.warning(res.message)
						}
					}.bind(this))
				},
				showVerify:function(){
					const url="/jzz/profitInput/periodNos/list";
					// status 0:未分润的所有期号 1 进入分润
					const data={
						client: 3,
						status: 0,
						token: token,
						userId: parseInt(userId),
					}
					pushData(url,data,function(res){
						if(res.state){
							this.dialogVerifyVisible=true;
							this.periodNoList=res.data.periodNos
						}else{
							this.$message.warning(res.message)
						}
					}.bind(this))
				},
				showRevert:function(){
					const url="/jzz/profitInput/periodNos/list";
					// status 0:未分润的所有期号 1 进入分润
					const data={
						client: 3,
						status: 0,
						token: token,
						userId: parseInt(userId),
					}
					pushData(url,data,function(res){
						if(res.state){
							this.dialogRevertVisible=true;
							this.periodNoList=res.data.periodNos
						}else{
							this.$message.warning(res.message)
						}
					}.bind(this))
				},
				/*分页*/
				handleCurrentChange:function(val){
				     this.page=val;
					 this.fetchList()
				},
			
				uploadFile: function() {
					if (this.fileList.length === 0) {
						this.$message.warning('请上传文件')
					} else {
						const fileUps = this.fileList[0]																		
						const url="/jzz/profitInput/periodNos/profit/excel/import?token="+token+'&userId='+userId;
						const data = new FormData()// FormData 对象
						const _this=this
						data.append('uploadFile', fileUps.raw)// 文件对象
						console.log(data)
						$.ajax({
						  url: getBaseUrl(url)+url,
						  type: "POST",
						  data: data,
						  processData: false,  // 不处理数据
						  contentType: false,// 不设置内容类型
						  success: function(res, status, xhr) {
						  	_this.dialogExcelVisible=false;
							_this.fetchList()
						  },
						  error: function(err) {
						  	_this.$message.warning(err)
						  }
						});			
					}
				},
				beforeUpload(file) {					
					let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
					let size = file.size / 1024 / 1024
					if (extension !== 'xlsx') {
						this.$message.warning('只能上传后缀是.xlsx的文件')
					}
					if (size > 10) {
						this.$message.warning('文件大小不得超过10M')
					}
				},

				// 文件状态改变
				handleChange(file, fileList) {
					if (file) {
						this.fileList = fileList.slice(-3)
					}
				},

				// 删除文件
				handleRemove(file, fileList) {
					console.log(file)
					this.fileList = []
				},

				// 文件超出个数限制
				handleExceed(files, fileList) {
					this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
				},

				// 文件上传成功
				handleSuccess(res, file, fileList) {
					console.log("成功")
					this.$message.success('文件上传成功')
				},

				// 文件上传失败
				handleError(err, file, fileList) {
					this.$message.error('文件上传失败')
				},
				handleCheckCrowFunding: function(index, row) {
					this.dialogExcelVisible = true;
					this.selectRowContent = row;
					this.selectIndex = index;
				},
				filtergoldDeedList: function() {
					for (var i = 0; i < this.goldDeedList.length; i++) {
						this.goldDeedList[i].beginTime = formatDate(this.goldDeedList[i].beginTime)
						this.goldDeedList[i].endTime = formatDate(this.goldDeedList[i].endTime)
					}
				},
				formatDay: function(standardDate) {
					var standardDay = standardDate.getTime(standardDate)
					var year = standardDate.getFullYear();
					var month = standardDate.getMonth() + 1;
					var day = standardDate.getDate();
					// var hour = standardDate.getHours();
					// var minute = standardDate.getMinutes();
					// var second = standardDate.getSeconds();
					var formatting = year + '-' + month + '-' + day;
					return formatting
				}

			}


		})
	</script>
</html>
